<template>
	
	<!-- 聊天对象显示该消息框 -->
	
	<view :class="[chatMessage.send_user_id!=$store.state.user.user.id?'sendMessageBox':'reciverMessageBox']">
		
		<view class="headImg">
			<u-avatar class="uavatar" :src="chatMessage.sendPicture" shape="square"  @click="toDetail"></u-avatar>
		</view>
		<view class="message">
			<view class="messagerName">
				{{chatMessage.sendAccount}}
			</view>
			<view class="messageContent">
				<view v-if="chatMessage.type==1" class="content">{{chatMessage.content}}</view>
				<view v-if="chatMessage.type==2" class="content">
					<image :src="chatMessage.content" mode="widthFix"></image>
				</view>
				<view  v-if="chatMessage.type==3" class="content">
					<video :src="chatMessage.content" :loop="true" :autoplay="true" :duration="10" :controls="false"></video>
				</view>
			</view>
			<view v-if="chatMessage.send_user_id==$store.state.user.user.id " class="status">
			
					<view v-if="!chatMessage.ifSendSussess" class="success">发送成功</view>
					<view v-else :class="[chatMessage.ifSendSussess=='发送成功'?'success':chatMessage.ifSendSussess=='正在发送'?'pending':'fail']">{{chatMessage.ifSendSussess}}</view>
			</view>
		</view>
	</view>
</template>

<script >
	export default {
		props:{
			chatMessage:{
				type:Object,
				default:()=>{}
			}
		},
		methods:{
			toDetail(){//点击头像跳转到用户资料详情
		
				uni.navigateTo({
					url:'/pages/userDetail/userDetail'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sendMessageBox{
		width: 100%;
		min-height: 100rpx;
		display: flex;
		
		.message{
			
			margin-left: 10rpx;
			.messagerName{
				color: #B2B2B2;
				font-size:22rpx ;
			}
			.messageContent{
				color: #232323;
				max-width: 500rpx;
				min-height:30rpx ;
				font-size: 30rpx;
				border-radius:0rpx 10rpx 10rpx 10rpx;
				background-color: #FFF;
				padding: 10rpx;
				word-wrap: break-word;
				image,video{
					max-width:400rpx;
					
				}
			
			}
		}
	}
	
	.reciverMessageBox{
		width: 100%;
		min-height: 100rpx;
		display: flex;
		flex-direction:row-reverse ;
		.message{
			
			margin-right: 10rpx;
			.messagerName{
				text-align: right;
				color: #B2B2B2;
				font-size:22rpx ;
			}
			.messageContent{
				color: #232323;
				min-height:30rpx ;
				max-width: 500rpx;
				font-size: 30rpx;
				border-radius:10rpx 0rpx 10rpx 10rpx;
				background-color: #9EEA6A;
				padding: 10rpx;
				word-wrap: break-word;
				image,video{
					max-width:400rpx;				
				}
			}
		}
	}
	.status{
		font-size: 10rpx;
		text-align: right;
		.success{
			color: #9EEA6A;
		}
		.fail{
			color:#E45656
		}
		.pending{
			color: #F9AE3D;
		}
	}
</style>
